Pseudo Classes(偽類選擇器)

附加在選擇器後面的關鍵詞，指定當狀態改變時會需要做什麼
注意：一個選擇器中只能使用一個偽類選擇器

語法是：
selector:pseudo-class {
property: value;
}

常用的pseudo-class

:hover 滑鼠游標懸停至元素上

舉例某一個元素，設定滑鼠移動到至元素上方時背景顏色改變

textarear:hover{
background-color: coral;}

:focus 滑鼠點擊後
:active 滑鼠按著的時候，放開就會恢復原本的樣子
:nth-child(n）
「n」可以寫成是單數「odd」，或者是寫為偶數「even」
「n」也可以是特定的數字

假設有一個表格，表頭和偶數列要分別使用不同的背景顏色

 tr:nth-child(1) {
        background-color: aqua;
      }

tr:nth-child(even) {
        background-color: #ffc;
      }

參考網址：
1.使用CSS3 :nth-child(n) 選取器教學
2.Pseudo Classes

Pseudo Elements(偽類元素)

附加在選擇器後面的關鍵詞，可設置所選元素的特定部分的樣式。

::before 在xx之前
::after 在xx之後
舉例：在每個段落前加上>>的符號

p::before{
   content:">>";
   color:red;}

::first-letter 每個段落的第一個字
舉例：每個段落的第一個字字體為2rem

p::first-letter {
        font-size: 2rem;
      }

::selection 選取的範圍
舉例：選取的範圍背景顏色改變為yellowgreen

 p::selection {
        background-color: yellowgreen;
      }

::first-line 每個段落的第一行
舉例：每個段落的第一行字體顏色改變為green

 p::first-line {
        color: green;
      }

參考網址：
1.Pseudo Elements